<style scoped>
.site-base-info {
  border: 1px solid #e5e5e5;
  width: 65%;
}
.site-base-info .header {
  padding: 10px 15px;
  background-color: #eeeeee;
}
.site-base-info .con {
  padding: 15px;
  font-size: 13px;
  line-height: 1.5;
}
.site-base-info table td {
  padding: 4px 0;
}
</style>
<!--  -->
<template>
  <div class="site-base-info">
    <div class="header"><i class="icon-home icon-homeUser"></i>网站资源</div>
    <div class="con">
      <table cellspacing="0" cellpadding="0" border="0" width="100%">
        <tbody>
          <tr>
            <td align="center">
              <Progress ref="setupSpace" />
            </td>
            <td align="center">
              <Progress ref="setupPage" />
            </td>
            <td align="center">
              <Progress ref="setupSystem" />
            </td>
            <td align="center">
              <Progress ref="setupForm" />
            </td>
            <td align="center">
              <Progress ref="setupDnum" />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import Progress from '@/components/main/user/welcome/Progress.vue'
export default {
  created () {
    // 获取目前网站空间大小以及可使用的空间大小，单位G，并且带有小数点后两位！
    this.$post('/host/get-current-host-setup-space', null).then(response => {
      if (response.space) {
        let gsize = parseFloat(response.gsize).toFixed(2)
        let space = parseFloat(response.space).toFixed(2)
        let percentage = parseFloat(gsize / space * 100).toFixed(2)
        this.setup.space = {
          text: '空间大小',
          percentage: parseFloat(percentage),
          useful: gsize + 'G',
          remaining: parseFloat(space - gsize).toFixed(2) + 'G',
          total: space,
          unit: 'G',
          color: '#409EFF'
        }
        if (this.$refs['setupSpace'] && this.$refs['setupSpace'].show) {
          this.$refs['setupSpace'].show(this.setup.space)
        }
      }
    })

    // 获取目前网站所能创建的网页数量，单位页，整数值
    this.$post('/host/get-current-host-setup-page', null).then(response => {
      if (response.page) {
        let page = parseInt(response.page)
        let usedPage = parseInt(response.usedPage)
        let percentage = page - usedPage < 0 ? '100.00' : parseFloat((usedPage / page) * 100).toFixed()
        this.setup.page = {
          text: '页面数量',
          percentage: parseFloat(percentage),
          useful: usedPage + '页',
          remaining: (page - usedPage) + '页',
          total: page,
          unit: '页',
          color: '#67C23A'
        }
        if (this.$refs['setupPage'] && this.$refs['setupPage'].show) {
          this.$refs['setupPage'].show(this.setup.page)
        }
      }
    })

    // 获取目前网站所能创建的系统数量，单位个，整数值
    this.$post('/host/get-current-host-setup-system', null).then(response => {
      if (response.system) {
        let system = parseInt(response.system)
        let usedSysmte = parseInt(response.usedSysmte)
        let percentage = system - usedSysmte < 0 ? '100.00' : parseFloat(usedSysmte / system * 100).toFixed(2)
        this.setup.system = {
          text: '系统数量',
          percentage: parseFloat(percentage),
          useful: usedSysmte + '个',
          remaining: (system - usedSysmte) + '个',
          total: system,
          unit: '个',
          color: '#E6A23C'
        }
        if (this.$refs['setupSystem'] && this.$refs['setupSystem'].show) {
          this.$refs['setupSystem'].show(this.setup.system)
        }
      }
    })

    // 获取目前网站所能创建的表单数量，单位个，整数值
    this.$post('/host/get-current-host-setup-form', null).then(response => {
      if (response.form) {
        let form = parseInt(response.form)
        let usedForm = parseInt(response.usedForm)
        let percentage = form - usedForm < 0 ? '100.00' : parseFloat(usedForm / form * 100).toFixed(2)
        this.setup.form = {
          text: '表单数量',
          percentage: parseFloat(percentage),
          useful: usedForm + '个',
          remaining: (form - usedForm) + '个',
          total: form,
          unit: '个',
          color: '#FF4949'
        }
        if (this.$refs['setupForm'] && this.$refs['setupForm'].show) {
          this.$refs['setupForm'].show(this.setup.form)
        }
      }
    })

    // 获取目前网站所能绑定的数量，单位个，整数值
    this.$post('/host/get-current-host-setup-dnum', null).then(response => {
      if (response.dnum) {
        let dnum = parseInt(response.dnum)
        let usedDnum = parseInt(response.usedDnum)
        let percentage = dnum - usedDnum < 0 ? '100.00' : parseFloat(usedDnum / dnum * 100).toFixed(2)
        this.setup.dnum = {
          text: '域名数量',
          percentage: parseFloat(percentage),
          useful: usedDnum + '个',
          remaining: (dnum - usedDnum) + '个',
          total: dnum,
          unit: '个',
          color: '#957BFF'
        }
        if (this.$refs['setupDnum'] && this.$refs['setupDnum'].show) {
          this.$refs['setupDnum'].show(this.setup.dnum)
        }
      }
    })
  },
  data () {
    return {
      setup: {
        space: {
          // text: '网站空间',
          // percentage: 88.2,
          // useful: '0.03G',
          // remaining: '2.97G',
          // total: 30.00,
          // unit: 'G'
        },
        page: {
          // text: '页面数量',
          // percentage: 10,
          // useful: '10页',
          // remaining: '200页',
          // total: 200,
          // unit: '页'
        },
        system: {
          // text: '系统数量',
          // percentage: 10,
          // useful: '10个',
          // remaining: '200个',
          // total: 200,
          // unit: '个'
        },
        form: {
          // text: '表单数量',
          // percentage: 10,
          // useful: '10个',
          // remaining: '200个',
          // total: 200,
          // unit: '个'
        },
        dnum: {
          // text: '域名数量',
          // percentage: 10,
          // useful: '10个',
          // remaining: '200个',
          // total: 200,
          // unit: '个'
        }
      }
    }
  },
  components: {
    Progress
  }
}

</script>
